<template>
  <div class="view">
    <x-header :left-options="{showBack: false}" class="vux-1px-b header">
      购物车
      <span
        v-if="token && data.length > 0"
        @click="editStatus = !editStatus"
        slot="right">{{ editStatus ? '完成' : '编辑' }}</span>
      <i class="msgs-icon" slot="right" @click="$router.push('/message')"></i>
    </x-header>
    <div class="content">
      <div class="withoutLogin" v-if="!token">
        <div class="login">
          <router-link to="/login">登录</router-link>
          <span>登录后可查看购物车中的商品</span>
        </div>
        <div class="icon">
          <i class="shopcarWithoutData-icon"></i>
          <p>购物车是空的</p>
        </div>
      </div>
      <withoutdata label="购物车是空的" v-if="token && data.length === 0"></withoutdata>
      <shopping-cart-card v-if="token && data.length > 0" :data="item" v-for="item in data" :key="item.seller_id"
      @goodsGroupChange="goodsGroupChange"
      @goodsChange="goodsChange"
      @goodsNumChange="goodsNumChange"></shopping-cart-card>
    </div>
    <my-footer
      v-if="token && data.length > 0"
      :data="data"
      :editStatus="editStatus"
      :money="money"
      :checkAllStatus="checkAllStatus"
      @delGoods="delGoods"
      @checkall="checkall"
      @firmOrder="firmOrder"
      ref="footer"/>

    <!-- 底部 -->
    <footer-nav></footer-nav>
  </div>
</template>

<script>
import { XHeader } from 'vux'
import withoutdata from '@comps/withoutdata'
import footerNav from '@comps/footerNav'
import shoppingCartCard from '@comps/card/shoppingCartCard'
import myFooter from './components/footer'
import { getShoppingCartList, deleteShoppingCartGoods, updateShoppingCartGoodsNum } from '@api'
import { SET_LOADING } from '@store/type'
import { mapMutations, mapState } from 'vuex'
import qs from 'qs'

export default {
  name: 'shopcartView',
  components: {
    XHeader,
    shoppingCartCard,
    footerNav,
    myFooter,
    withoutdata
  },
  data () {
    return {
      data: [],
      editStatus: false,
      checkAllStatus: false,
      checkedMap: new Map()
    }
  },
  computed: {
    ...mapState(['token']),
    // 计算总金额
    money () {
      var money = 0
      this.data.map(item => {
        item.goods.map(item => {
          if (item.status) {
            money += item.goods_num * item.goods_saleprice
          }
        })
      })
      return money
    }
  },
  methods: {
    ...mapMutations({
      setLoading: SET_LOADING
    }),
    // 全部商品选择
    async checkall (status) {
      this.checkAllStatus = status
      this.data.map(item => {
        item.status = status
        item.goods.map(item => {
          item.status = status
        })
      })
    },
    // 单个商品选择
    async goodsChange (goodsGroup) {
      this.checkAllStatus = this.data.every(item => {
        return item.status
      })
      this.$refs.footer.setChecked(this.checkAllStatus)
    },
    // 店铺全部商品选择
    async goodsGroupChange (goodsGroup) {
      this.checkAllStatus = this.data.every(item => {
        return item.status
      })
      this.$refs.footer.setChecked(this.checkAllStatus)
    },
    // 商品库存改变
    async goodsNumChange (goods) {
      if (!this.token) {
        this.$toastText('请先进行登录！')
        return
      }

      this.setLoading({
        status: true,
        opacity: 0
      })
      let form = new FormData()
      form.append('shopping_id', goods.shopping_id)
      form.append('goods_num', goods.goods_num)
      let res = await updateShoppingCartGoodsNum(form)
      this.setLoading(false)
      if (res && res.code === 200) {
        goods.goods_num = res.data
      }
    },
    // 加载购物车商品
    async loadShoppingCart () {
      if (!this.token) {
        return
      }

      this.setLoading({
        status: true,
        opacity: 0
      })
      let res = await getShoppingCartList()
      this.setLoading(false)
      if (res && res.code === 200) {
        res.data.map(item => {
          item.status = false
          item.withoutShopcar = false
          item.goods.map(item => {
            item.status = this.checkedMap.get(item.shopping_id) || false
          })
          let flag = item.goods.every(goods => {
            return goods.status
          })
          item.status = flag
          this.checkedMap.clear()
        })
        this.data = res.data
      }
    },
    // 删除购物车商品
    async delGoods () {
      if (!this.token) {
        this.$toastText('请先进行登录！')
        return
      }

      let shoppingIdList = []
      let flag = true // 默认未选择
      this.data.map(item => {
        item.goods.map(item => {
          if (item.status) {
            flag = false
            shoppingIdList.push(item.shopping_id)
          }
        })
      })
      if (flag) {
        this.$toastText('请选择要移除的购物车商品！')
        return
      }
      this.setLoading({
        status: true,
        opacity: 0
      })
      let res = await deleteShoppingCartGoods(qs.stringify({
        shoppingIdList: shoppingIdList
      }))
      this.setLoading(false)
      if (res && res.code === 200) {
        this.editStatus = false
        this.loadShoppingCart()
      }
    },
    async firmOrder () {
      let shoppingList = []
      this.data.map(group => {
        let goods = []
        group.goods.map(item => {
          if (item.status) {
            goods.push(item)
            this.checkedMap.set(item.shopping_id, true)
          }
        })
        if (goods.length > 0) {
          group.goods = goods
          shoppingList.push(group)
        }
      })
      if (shoppingList.length <= 0) {
        this.$toastText('请选择需要购买的商品！')
        return
      }
      sessionStorage.setItem('orderlist', JSON.stringify(shoppingList))
      this.$router.push('/firmOrder')
    }
  },
  created () {

  },
  activated () {
    this.loadShoppingCart()
  }
}
</script>

<style lang="scss" scoped>
  @import "../../assets/css/pub";

  .content {
    height: calc(100% - #{$default_navbar_height} - #{$default_tabbar_height} - #{$default_toolbar_height});
  }

  .header {
    span {
      margin-right: .25rem;
    }
  }

  .withoutLogin {
    .login {
      background-color: #fff;
      height: $default_toolbar_height;
      display: flex;
      align-items: center;
      padding: 0 .25rem;
      a {
        width: 1.875rem;
        height: .625rem;
        font-size: $default_font_size;
        border: .0125rem solid $default_border_color;/*no*/
        border-radius: .125rem;
        text-align: center;
        line-height: .625rem;
        margin-right: .25rem;
      }
      span {
        font-size: $default_font_size;
      }
    }
    .icon {
      margin-top: 1.35rem;
      text-align: center;
      p {
        margin-top: .4125rem;
      }
    }
  }
</style>
